<template>
    <div class="sea-page-row">
        <div class="width-25 box" style="height: 100%;box-sizing: border-box;">
            <el-button type="primary" class="btn-block">Compose</el-button>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-inbox"></i> Inbox：</strong>
                <span class="badge bg-orange pull-right">1</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-envelope-o"></i> Sent：</strong>
                <span class="badge bg-orange pull-right">4</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-file-text-o"></i> Drafts：</strong>
                <span class="badge bg-gray pull-right">32</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-filter"></i> Junk：</strong>
                <span class="badge bg-gray pull-right">1</span>
            </div>
            <div class="text-block border-bottom">
                <strong><i class="fa fa-trash-o"></i> Trash：</strong>
                <span class="badge bg-gray pull-right">2</span>
            </div>
        </div>
        <div class="page-body box">
            <div class="flex-column" style="height: 100%;">
                <div class="flex-header">
                    <sea-table-title slot="header" title="Compose New Message">
                    </sea-table-title>
                    <div class="margin-bottom">
                        <el-input placeholder="To:"></el-input>
                    </div>
                    <div class="margin-bottom">
                        <el-input placeholder="Subject:"></el-input>
                    </div>
                </div>
                <div class="flex-body">
                    <textarea style="height: 96%;box-sizing: border-box" class="textarea" :rows="72"></textarea>
                </div>
                <div class="flex-footer">
                    <div class="margin-bottom">
                        <el-button><i class="fa fa-fw fa-paperclip"></i>Attachment</el-button>
                        <p>Max. 32MB</p>
                    </div>

                    <div class="pull-left">
                        <el-button><i class="fa fa-times"></i>Discard</el-button>
                    </div>
                    <div class="pull-right">
                        <el-button><i class="fa fa-fw fa-pencil"></i>Draft</el-button>
                        <el-button type="primary"><i class="fa fa-fw fa-envelope-o"></i>Send</el-button>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "compose",
    data() {
        return {}
    }
}
</script>

<style scoped>
</style>
